<template name="visitorEdit">
	<div class="visitor-edit">
		<form autocomplete="off">
			{{#with visitor}}
				<h3>{{username}}</h3>
				<div class="rc-input rc-form-group rc-form-group--small">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ "Name"}}</div>
						<div class="rc-input__wrapper">
							<input name="name" type="text" class="rc-input__element" autocomplete="off" value="{{name}}"/>
						</div>
					</label>
				</div>
				<div class="rc-input rc-form-group rc-form-group--small">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ "Email"}}</div>
						<div class="rc-input__wrapper">
							<div class="rc-input__icon">
								{{> icon icon='mail' }}
							</div>
							<input class="rc-input__element" type="text" name="email" autocomplete="off" value="{{email}}">
						</div>
					</label>
				</div>
				<div class="rc-input rc-form-group rc-form-group--small">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ "Phone"}}</div>
						<div class="rc-input__wrapper">
							<input class="rc-input__element" type="text" name="phone" autocomplete="off" value="{{phone}}" disabled="{{isSmsIntegration}}">
						</div>
					</label>
				</div>

				{{#each visitorCustomFields}}
					<div class="rc-input rc-form-group rc-form-group--small">
						<label class="rc-input__label">
							<div class="rc-input__title">{{label}}</div>
							<div class="rc-input__wrapper">
								<input class="rc-input__element" type="text" name="{{name}}" autocomplete="off" data-visitorLivechatData="true" value="{{value}}">
							</div>
						</label>
					</div>
				{{/each}}
			{{/with}}

			{{#with room}}
				<h3>{{_ "Conversation" }}</h3>
				<div class="rc-input rc-form-group rc-form-group--small">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ "Topic"}}</div>
						<div class="rc-input__wrapper">
							<input class="rc-input__element" type="text" name="topic" autocomplete="off" value="{{topic}}">
						</div>
					</label>
				</div>
				{{#if hasAvailableTags}}
					<div class="rc-form-group rc-form-group--small rc-form-group--inline">
						<select id="tagSelect" class="rc-input rc-input--small rc-form-item-inline">
							<option value="placeholder" disabled selected>{{_ "Select_tag"}}</option>
							{{#each availableUserTags}}
								<option value="{{_id}}">{{this}}</option>
							{{/each}}
						</select>
						<button id="addTag" class="rc-button rc-button--primary rc-form-item-inline"><i class="icon-plus"></i></button>
					</div>
				{{else}}
					<div class="rc-input rc-form-group rc-form-group--small">
						<label class="rc-input__label">
							<div class="rc-input__title">{{_ "Tags"}}</div>
							<div class="rc-input__wrapper">
								<div class="rc-input__icon">
									{{> icon icon='edit' }}
								</div>
								<input id="tagInput" class="rc-input__element" type="text" name="tags" autocomplete="off" placeholder="{{_"Enter_a_tag"}}">
							</div>
						</label>
					</div>
				{{/if}}
				<div class="rc-form-group rc-form-group--small">
					<ul id="tags" class="chip-container current-room-tags">
						{{#each tags}}
						<li class="remove-tag" title="{{this}}">
							{{#if canRemoveTag availableUserTags this}}
								<i class="icon icon-cancel-circled"></i>
							{{/if}}
							{{this}}
						</li>
						{{/each}}
					</ul>
				</div>

				{{#each roomCustomFields}}
					<div class="rc-input rc-form-group rc-form-group--small">
						<label class="rc-input__label">
							<div class="rc-input__title">{{label}}</div>
							<div class="rc-input__wrapper">
								<input class="rc-input__element" type="text" name="{{name}}" autocomplete="off" data-roomLivechatData="true" value="{{value}}">
							</div>
						</label>
					</div>
				{{/each}}
			{{/with}}

			<div class="rc-user-info__flex rc-user-info__row">
				<button class='rc-button cancel' type="button"><span>{{_ "Cancel"}}</span></button>
				<button class='rc-button rc-button--primary save'><span>{{_ "Save"}}</span></button>
			</div>
		</form>
	</div>
</template>
